<template>
  <div class="toolbar colorMain">
    <div class="mt-10 mb-10">
      <line-from-choose @change="change"/>
    </div>
    <!--<div><el-button :loading="excelLoad" icon="el-icon-printer" style="float: right;margin: 0 0 10px 0" size="mini" type="success" @click="downExcel" >导出数据</el-button></div>-->
    <analyse-online-table :table-data="tableData" :key_mapper="key_mapper" :sortable = "['user_id', 'chn']" :min-width = "160" size="small" @sort-change="sortChange"/>
    <el-row :gutter="24" class="m-10" >
      <el-col :span="12" class="block">
        <div>
          <ve-line :data="chartData.chartData"/>
        </div>
      </el-col>
      <el-col :span="12" class="block">
        <div>
          <ve-histogram :data="chartData.chartDatahis" :settings="chartData.chartSettingshis"/>
        </div>
      </el-col>
      <el-col :span="12" class="block">
        <div>
          <ve-histogram :data="chartData.chartDataJoin" :settings="chartData.chartSettingJoin"/>
        </div>
      </el-col>
      <el-col :span="12" class="block">
        <div>
          <ve-histogram :data="chartData.chartDataPlay" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { yesterday } from '@/model/DateRange'
import { productProfitAnalysis } from '@/api/table'
import mixins from '@/model/mixins'
import mixinsFrom from '@/model/mixinsFrom'

export default {
  name: 'Revenue',
  mixins: [mixinsFrom, mixins],
  data() {
    return {
      chartData: {
        chartSettingJoin: {
          axisSite: { right: ['bet_profit_margin'] },
          showLine: ['bet_profit_margin']
        },
        chartSettingshis: {
          axisSite: { right: ['financial_profit_margin'] },
          showLine: ['financial_profit_margin']
        },
        chartData: {
          columns: ['day', 'recharge_amount', 'withdraw_amount'],
          rows: []
        },
        chartDatahis: {
          columns: ['day', 'financial_profit_amount', 'financial_profit_margin'],
          rows: []
        },
        chartDataPlay: {
          columns: ['day', 'bet_profit_amount', 'real_profit_amount'],
          rows: []
        },
        chartDataJoin: {
          columns: ['day', 'total_bet_amount', 'bet_profit_margin'],
          rows: []
        }
      },
      intervalType: '',
      dateType: 'date',
      queryFrom: {
        interval_type: 'day',
        target_time: yesterday
      },
      chartFrom: [],
      API: productProfitAnalysis
    }
  },
  watch: {
    tableData() {
      const chartFrom = this.tableData.slice(0, this.tableData.length - 2)
      this.chartData.chartData.rows = chartFrom
      this.chartData.chartDatahis.rows = chartFrom
      this.chartData.chartDataPlay.rows = chartFrom
      this.chartData.chartDataJoin.rows = chartFrom
      this.chartData = this.pie(this.chartData, this.key_mapper)
    }
  },
  methods: {
    change(data) {
      this.getData(data)
    }
  }
}
</script>
